<template>
  <view :class="{'is-animation': isAnimation, 'is-open': isOpen}" class="p-pop-x">
    <view class="title">
      <text class="em em-1">手气红包抽取中…</text>
      <text class="em em-2">恭喜抽中手气红包</text>
    </view>
    <view v-if="userList" class="user">
      <view class="ul">
        <view v-for="(item, index) in userList" :key="index" class="li">
          <view class="avatar">
            <x-image :src="item.avatar" />
          </view>
          <view class="text">成功抽取{{ item.amount }}</view>
          <view class="em">手气一般</view>
        </view>
      </view>
    </view>

    <view class="box">
      <view class="layer-1" @click="handleSubmit">
        <view class="content">
          <view class="dl">
            <view class="dt">手气最佳</view>
            <view class="amount">
              {{ detail.totalDiscountAmount }}
              <view class="sub">元</view>
            </view>
            <view class="dd">无门槛 立即使用</view>
          </view>
        </view>
        <view class="button">领取查看</view>
        <view class="bottom" />
      </view>
      <view :class="{'is-hide': isHide}" class="layer-2">
        <view class="header">
          <view class="dt">拼手气红包</view>
          <view class="dd">恭喜发财，大吉大利</view>
        </view>
        <view class="bottom" />
        <view class="kai" @click="handleOpen">開</view>
      </view>
      <view class="timeout">{{ sum >= 0 ? sum : 0 }}秒后自动领取</view>
    </view>
    <view class="_close" @click="handleClose">
      <x-icon name="icon-003" size="50" color="#fff"/>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';

export default {
  name: 'PPop9',
  components: {
    XImage,
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isAnimation: false,
      sum: 1,
      isOpen: false,
      isHide: false,
      timeout: null,
      userList: null
    };
  },
  created() {
    this.setUserList();
    this.isAnimation = true;
    this.countdownA();
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    setUserList() {
      const list = [];
      for (let i = 0; i < 7; i++) {
        const discountAmount = this.detail.totalDiscountAmount;
        const random = Math.floor(Math.random() * (8 - 3 + 1)) + 3;
        const avatar = Math.floor(Math.random() * 400);
        list.push({
          avatar: this.$tools.formatOss(`http://alicdn.itaored.com/feima-uploaded/headImg/${avatar}.png`, 80),
          amount: this.$tools.formatZero(discountAmount - discountAmount / random)
        });
      }
      this.userList = list;
    },
    handleClose() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('close');
    },
    countdownA() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownA();
        } else {
          this.handleOpen();
        }
      }, 1000);
    },
    countdownB() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownB();
        } else {
          this.$emit('submit');
        }
      }, 1000);
    },
    // 主动打开
    handleOpen() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.sum = 2;
      this.isOpen = true;
      this.isHide = true;
      this.countdownB();
      this.$emit('ready');
    },
    handleSubmit() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('submit');
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-pop-x{
    height: 100vh; width: 100%; background: #000; overflow: hidden; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center;
    .title{
      width: 612px; height: 122px; background: cdn('/images/pic-014.png') no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; color: #FDF6CD; font-size: 50px; font-weight: bold; position: relative;
      .em{ position: absolute; left: 0; top: 50%; transform: translate3d(0, -50%, 0); width: 100%;}
      .em-2{ opacity: 0;}
    }
    .user{
      font-size: 36px; padding: 20px 0;
      .ul{ height: 160px; overflow: hidden;}
      .li{
        display: flex; align-items: center; justify-content: center; height: 80px;
        .avatar{ width: 55px; height: 55px; background-color: #fff; border-radius: 50%; overflow: hidden;}
        .text{ color: #fff; padding: 0 20px;}
        .em{ color: #FDF6CD;}
      }
    }

    .box{
      width: 540px; height: 700px; position: relative;
    }

    .layer-1{
      z-index: 2;
      &:before{ content: ''; position: absolute; width: 100%; height: 92%; left: 0; bottom: 0; background: #C33527; border-radius: 40px;}
      .content{
        background: #fff; width: 88%; height: 100%; position: absolute; left: 50%; bottom: 0; transform: translate3d(-50%, 0, 0); border-radius: 40px;
        .dl{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 60px;}
        .amount{
          color: $uni-color-primary; position: relative; font-size: 160px; font-weight: bold; line-height: 1;
          .sub{ font-weight: normal; font-size: 40px; position: absolute; right: -40px; bottom: 26px;}
        }
        .dt{
          color: #710A1A; display: flex; align-items: center; justify-content: center; font-size: 36px; padding-bottom: 80px;
          &:before{ content: ''; width: 70px; height: 48px; background: cdn('/images/pic-019.png') no-repeat; background-size: cover; margin-right: 10px;}
        }
        .dd{ color: #86521B; padding-top: 10px;}
      }
      .button{ background: #FFE4B3; margin-left: -230px; width: 460px; height: 90px; line-height: 90px; border-radius: 80px; color: #000; font-size: 40px; text-align: center; position: absolute; left: 50%; bottom: 50px; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, .3);}
    }
    .layer-2{
      z-index: 3;
      .header{
        height: 546px; background: cdn('/images/pic-016.png') no-repeat; background-size: cover; position: relative; z-index: 2; color: #EFCF9D; padding-top: 120px;
        .dt{
          font-weight: bold; display: flex; align-items: center; justify-content: center;
          &:before{ content: ''; width: 36px; height: 36px; background: cdn('/images/pic-018.png') no-repeat; background-size: cover; margin-right: 10px;}
        }
        .dd{ font-size: 46px; padding-top: 30px;}
      }
      .kai{ position: absolute; left: 50%; bottom: 100px; width: 160px; height: 160px; margin-left: -80px; box-shadow: 0 0 10px rgba(0, 0, 0, .3); border-radius: 50%; font-size: 70px; line-height: 1; background: #EFCF9D; color: #000; display: flex; justify-content: center; align-items: center; z-index: 3;}
      &.is-hide{ animation: fadeOutZIndex .1s 1s ease-in forwards}
    }
    .layer-1,
    .layer-2{
      position: absolute; width: 100%; left: 0; top: 0; height: 100%;
      .bottom{ width: 100%; height: 256px; background: cdn('/images/pic-017.png') no-repeat; background-size: cover; position: absolute; bottom: 0;}
    }

    ._close{ position: absolute; right: 50px; top: 250px; }
    .timeout{ position: absolute; left: 0; bottom: -70px; color: #BCBABC; font-size: 28px; text-align: center; width: 100%;}

    &.is-animation{
      .title{ opacity:0; animation: fadeInLeft .6s .2s ease-in forwards;}
      .user .li { animation: slide-up-down 6s infinite;}
      .box{ opacity:0; animation: fadeIn .8s .2s ease-in forwards;}
    }
    &.is-open{
      .title{
        .em-1{ animation: fadeOut .75s ease-in forwards}
        .em-2{ opacity: 0; animation: fadeIn .75s .5s ease-in forwards}
      }
      .layer-1{
        .button{ animation: tada .75s 1.2s ease-in forwards;}
      }
      .layer-2{
        .kai{ animation: bounceOut .75s ease-in forwards;}
        .header{ animation: fadeOutTop .4s .6s ease-in forwards;}
        .bottom{ animation: fadeOutDown .4s .6s ease-in forwards;}
      }
      .timeout{ opacity: 0; animation: fadeIn .75s 1s ease-in forwards}
    }
  }

  @keyframes slide-up-down {
    0% {
      transform: translateY(0);
    }
    20% {
      transform: translateY(-80px);
    }
    40% {
      transform: translateY(-160px);
    }
    60% {
      transform: translateY(-240px);
    }
    80% {
      transform: translateY(-320px);
    }
    100% {
      transform: translateY(-400px);
    }
  }

  @keyframes fadeInLeft {
    0% {
      opacity:0;
      transform:translate3d(-100%, 0, 0)
    }
    to {
      opacity:1;
      transform:translateZ(0)
    }
  }

  @keyframes fadeIn {
    0% {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }

  @keyframes fadeOutTop {
    0% {
      transform:translate3d(0, 0, 0)
    }
    to {
      opacity:0;
      transform:translate3d(0, -200%, 0)
    }
  }

  @keyframes fadeOutDown {
    0% {
      transform:translate3d(0, 0, 0)
    }
    to {
      opacity:0;
      transform:translate3d(0, 200%, 0)
    }
  }
  @keyframes fadeOutZIndex {
    0% {
      z-index: 3;
    }
    to {
      z-index: 1;
    }
  }

  @keyframes bounceOut {
    20% {
      transform:scale3d(.9, .9, .9)
    }
    50%, 55% {
      opacity:1;
      transform:scale3d(1.1, 1.1, 1.1)
    }
    99% {
      opacity:0;
      transform:scale3d(.3, .3, .3)
    }
    to{ opacity:0; transform:scale3d(0, 0, 0)}
  }

  @keyframes tada {
    0% {
      transform:scaleX(1)
    }
    10%, 20% {
      transform:scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
      transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%, 60%, 80% {
      transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
    to {
      transform:scaleX(1)
    }
  }
</style>
